<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
            type="primary"
            class="handle-del mr10"
            @click="openAdd()" size="small">创建商品拆料
        </el-button>
        <div class="selectBox">
          <el-form ref="selectValue" :model="selectValue" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据编号">
                  <el-input v-model="selectValue.number" style="width: 200px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创单人">
                  <el-input v-model="selectValue.creator" style="width: 200px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="类库名称">
                  <el-select
                      v-model="selectValue.commodity_type"
                      placeholder="请选择类库名称"
                      style="width: 200px">
                    <el-option label="素金类" value="素金类"></el-option>
                    <el-option label="镶嵌类" value="镶嵌类"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <div class="selectBtn">
                  <el-button type="primary" @click="selectList()" >查找</el-button>
                  <el-button  @click="reset()" >取消</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="总部名称">
                  <el-select
                      v-model="selectValue.mainstore"
                      placeholder="请选择类库名称"
                      style="width:200px">
                    <el-option label="北京总部" value="北京总部"></el-option>
                    <el-option label="上海总部" value="上海总部"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创单日期">
                  <el-col :span="10">
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="selectValue.startTime"
                        style="width: 200px"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="3" align="center">-</el-col>
                  <el-col :span="11">
                    <el-date-picker type="date"  v-model="selectValue.endTime" style="width:200px;" class="marginLeft"></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column label="序号" width="60px" align="center">
          <template slot-scope="scope">{{ (query.pageIndex- 1)*query.pageSize + (scope.$index + 1) }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.status===0?'primary' :(scope.row.status===1?'danger'
                :(scope.row.status===2?'success':''))">
              {{scope.row.status===0?'已通过':(scope.row.status===1?'已驳回':(scope.row.status===2?'待审核':''))}}
            </el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="number" label="单据编号" width="130px" align="center"></el-table-column>
        <el-table-column prop="created" label="创单日期" align="center"></el-table-column>
        <el-table-column prop="mainstore" label="总部名称" align="center"></el-table-column>
        <el-table-column prop="creator" label="创单人" align="center"></el-table-column>
        <el-table-column prop="approver" label="审批人" align="center"></el-table-column>
        <el-table-column prop="approve_time" label="审批日期" align="center"></el-table-column>
        <el-table-column label="操作" width="280" align="center" >
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status===0" disabled>审批</el-button>
            <el-button type="text" v-else-if="scope.row.status===1" @click="chexiaoBoHui(scope.row)">撤销驳回</el-button>
            <el-button type="text" v-else-if="scope.row.status===2" @click="openShenpi(scope.$index,scope.row)">审批</el-button>
            <!--            <el-button type="text" v-else>{{scope.row.caoZuo}}</el-button>-->
            <el-button type="text" @click="openEdit(scope.$index, scope.row)">查看(编辑)</el-button>
            <el-button type="text" @click="chailiaomingxi(scope.$index, scope.row)">拆料明细</el-button>
            <el-button type="text" class="red" @click="deleteList(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="dialogFormVisibleLook" width="50%" align="center"  :close-on-click-modal="false">
      <el-form :inline="true" :model="form" class="demo-form-inline" label-width="100px">
        <el-form-item label="单据编号" >
          <el-input v-model="form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" style="width:206px" :disabled="true">
            <el-option label="0" value=0></el-option>
            <el-option label="1" value=1></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="创建日期"
            class="right"
        >
          <el-input v-model="form.created" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总部名称">
          <el-select v-model="form.mainstore" style="width:206px">
            <el-option label="北京总部" value="北京总部" ></el-option>
            <el-option label="上海总部" value="上海总部" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="类库名称"
            class="right"
        >
          <el-input v-model="form.commodity_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" class="right">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="标签金额"
            class="right"
        >
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="form.costs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创单人">
          <el-input v-model="form.creator" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="审批人"
            class="right"
        >
          <el-input v-model="form.approver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批日期">
          <el-input v-model="form.approve_time" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item class="anniu">
          <el-button type="primary" @click="editList() "
          >确定</el-button
          >
          <el-button @click="dialogFormVisibleLook=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    //创建商品拆料-->
    <el-dialog title="新增商品拆料" :visible.sync="dialogFormVisible2"  width="50%" align="center" :close-on-click-modal="false">
      <el-form :inline="true" :model="form" class="demo-form-inline" label-width="100px">
        <el-form-item label="单据编号" >
          <el-input v-model="form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.status" style="width:206px"  placeholder="待审批" :disabled="true" value="2">
          </el-input>
        </el-form-item>
        <el-form-item
            label="创建日期"
            class="right"
        >
          <el-date-picker
              formt="yyyy-MM-dd"
              v-model="form.created"
              style="width:206px"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="总部名称">
          <el-select v-model="form.mainstore" style="width:206px">
            <el-option label="北京总部" value="北京总部" ></el-option>
            <el-option label="上海总部" value="上海总部" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="类库名称"
            class="right"
        >
          <el-select v-model="form.commodity_type" style="width:206px">
            <el-option label="素金类" value="素金类" ></el-option>
            <el-option label="镶嵌类" value="镶嵌类" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" >
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" class="right">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="标签金额"
            class="right"
        >
          <el-input v-model="form.costs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本" >
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创单人" >
          <el-input v-model="form.creator" autocomplete="off" value="陈露"></el-input>
        </el-form-item>
        <el-form-item label="审批人" class="right">
          <el-input v-model="form.approver" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="审批日期" >
          <el-date-picker
              v-model="form.approve_time"
              style="width:206px"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <br />
        <el-form-item class="anniu">
          <el-button type="primary" @click="addList()"
          >确定</el-button
          >
          <el-button @click = "dialogFormVisible2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    创建商品拆料明细-->
    <el-dialog title="新增商品拆料明细" :visible.sync="dialogFormVisibleMingXi"  width="50%" align="center" :close-on-click-modal="false">
      <el-form :inline="true" :model="mingxiValue" class="demo-form-inline" label-width="100px">
        <el-form-item label="商品编码">
          <el-input v-model="mingxiValue.commodity_code" style="width:206px" value="0">
          </el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="mingxiValue.commodity_name" style="width:206px" value="0">
          </el-input>
        </el-form-item>
        <el-form-item label="金重" >
          <el-input v-model="mingxiValue.gold_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金价" >
          <el-input v-model="mingxiValue.gold_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量(主石)" >
          <el-input v-model="mingxiValue.mainstone_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额(主石)" >
          <el-input v-model="mingxiValue.mainstone_cost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称(配石)" >
          <el-input v-model="mingxiValue.secondstone_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量(配石)" class="right">
          <el-input v-model="mingxiValue.secondstone_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额(配石)" >
          <el-input v-model="mingxiValue.secondstone_cost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工费" >
          <el-input v-model="mingxiValue.laborcost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书费" >
          <el-input v-model="mingxiValue.certificate_fee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本" >
          <el-input v-model="mingxiValue.cost" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item class="anniu">
          <el-button type="primary" @click="addMingXi()"
          >确定</el-button
          >
          <el-button @click = "dialogFormVisibleMingXi = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    //拆料明细-->
    <el-dialog title="拆料明细" :visible.sync="mingxi"  width="99%" align="center"  :close-on-click-modal="false">
      <div>

        <div class="dingdanbianhao">
          <el-row>
            <el-col :span="6">
              <el-form :model="form" :inline="true" style="height: 30px">
                <el-form-item label="单据编号：" style="margin-right: 30px">
                  <el-input type="text" :disabled="true" v-model="form.number"></el-input>
                  <el-input type="hidden" v-model="row"></el-input>
                  <el-input type="hidden" v-model="index"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-button
                  type="primary"
                  class="handle-del mr10"
                  @click="dialogFormVisibleMingXi=true" size="small">创建商品拆料明细
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
            class="chailiaomingxi"
            :data="mingxiList"
            border
            style=" margin-top: 20px"
        >
          <el-table-column>
            <el-table-column prop='id' label="行号" width="70"> </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="commodity_code" label="商品编码" width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="commodity_name" label="商品名称" width="140">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="gold_weight" label="金重" width="80">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="gold_price" label="金价" width="80">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="gold_money" label="金额" width="80">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="baoCode" label="主石">
            <el-table-column prop="mainstone_weight" label="重/数量" width="80">
            </el-table-column>
            <el-table-column prop="mainstone_cost" label="金额" width="80"> </el-table-column>
          </el-table-column>
          <el-table-column prop="peishi" label="配石">
            <el-table-column prop="secondstone_name" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="secondstone_weight" label="重/数量" width="80">
            </el-table-column>
            <el-table-column prop="secondstone_cost" label="金额" width="90"> </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="laborcost" label="工费" width="90"> </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="certificate_fee" label="证书费" width="90">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="cost" label="成本" width="90"> </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="opera" label="操作" width="190">
              <template slot-scope="scope">
                <el-button type="text" @click="openMingXi((scope.$index, scope.row))">编辑</el-button>
                <el-button type="text" class="red" @click="delMingXi(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!--    拆料明细编辑-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisibleMingXiEdit"  width="50%" align="center" :close-on-click-modal="false">
      <el-form :inline="true" :model="mingxiValue" class="demo-form-inline" label-width="100px">
        <el-form-item label="商品编码">
          <el-input v-model="mingxiValue.commodity_code" style="width:206px" value="0">
          </el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="mingxiValue.commodity_name" style="width:206px" value="0">
          </el-input>
        </el-form-item>
        <el-form-item label="金重" >
          <el-input v-model="mingxiValue.gold_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金价" >
          <el-input v-model="mingxiValue.gold_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量(主石)" >
          <el-input v-model="mingxiValue.mainstone_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额(主石)" >
          <el-input v-model="mingxiValue.mainstone_cost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称(配石)" >
          <el-input v-model="mingxiValue.secondstone_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量(配石)" class="right">
          <el-input v-model="mingxiValue.secondstone_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额(配石)" >
          <el-input v-model="mingxiValue.secondstone_cost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工费" >
          <el-input v-model="mingxiValue.laborcost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书费" >
          <el-input v-model="mingxiValue.certificate_fee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本" >
          <el-input v-model="mingxiValue.cost" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item class="anniu">
          <el-button type="primary" @click="editMingXi()"
          >确定</el-button
          >
          <el-button @click = "dialogFormVisibleMingXi = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    审批弹框-->
    <el-dialog title="详情" :visible.sync="shenpifrom" width="50%" align="center"  :close-on-click-modal="false">
      <el-form :inline="true" :model="form" class="demo-form-inline" label-width="100px">
        <el-form-item label="单据编号" >
          <el-input v-model="form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" style="width:206px" :disabled="true">
            <el-option label="0" value=0></el-option>
            <el-option label="1" value=1></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="创建日期"
            class="right"
        >
          <el-input v-model="form.created" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总部名称">
          <el-select v-model="form.mainstore" style="width:206px">
            <el-option label="北京总部" value="北京总部" ></el-option>
            <el-option label="上海总部" value="上海总部" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="类库名称"
            class="right"
        >
          <el-input v-model="form.commodity_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" class="right">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="标签金额"
            class="right"
        >
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="form.costs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创单人">
          <el-input v-model="form.creator" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="审批人"
            class="right"
        >
          <el-input v-model="form.approver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批日期">
          <el-input v-model="form.approve_time" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item class="anniu">
          <el-button @click="shenpiPass" size="small" type="success" plain>审批通过</el-button>
          <el-button @click="shenPiBoHui" size="small" type="primary" plain>审批驳回</el-button>
          <el-button type="primary" @click="shenpifrom=false " size="small"
          >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "chailiao",
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 5
      },
      labelPosition: "right",
      dialogFormVisibleLook: false,
      shenpifrom: false,
      mingxi: false,
      dialogFormVisible2: false,
      // dialogFormVisibleSelect: false,
      dialogFormVisibleMingXi: false,
      dialogFormVisibleMingXiEdit: false,
      tableData: [],
      mingxiList: [],
      created: '',
      multipleSelection: [],
      delList: [],
      caoZuo:["已通过","已驳回","待审核"],
      pageTotal: 0,
      pageSize: 4,
      currentPage: 1,
      form: {
        id: "",
        number: "",
        status: "2",
        created: "",
        mainstore: "",
        commodity_type: "",
        amount: "",
        weight: "",
        creator: "",
        approver: "",
        approve_time: ""
      },
      selectValue: {
        creator: "",
        commodity_type: "",
        mainstore: "",
        number: "",
        startTime: "",
        endTime: ""
      },
      mingxiValue: {
        number: '',
        commodity_code: '',
        commodity_name: '',
        gold_weight: '',
        gold_price: '',
        mainstone_weight: '',
        mainstone_cost: '',
        laborcost: '',
        cost: '',
        certificate_fee: '',
        secondstone_name: '',
        secondstone_weight: '',
        secondstone_cost: ''
      },
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
    // this.getchailiaoList();
  },
  methods: {
    //获取 easy-mock 的模拟数据
    //审批
    shenpiPass() {
      console.log(this.form);
      console.log(this.form.status);
      console.log(this.form.id)
      var state = this.form.status = 0;
      this.$axios.post(this.$api.chailiao.editList,{
            status: state, id: this.form.id
          }
          , {
            headers: {
              "Content-Type": "application/json"
            }
          }
      ).then((response) => {
        var result = response.data;
        if (result.msg === "编辑成功!") {
          this.$message.success("审核成功!")
          this.getData()
          this.shenpifrom = false
        } else {
          this.$alert("审核出错，请重新审核")
        }
      }).catch((err) => {
        console.log(err)
        this.$alert('请求出错')
      })
    },
    //审核驳回
    shenPiBoHui(){
      console.log(this.form);
      console.log(this.form.id)
      var state = this.form.status = 1;
      console.log(state);
      this.$axios.post(this.$api.chailiao.editList, {
            status: state, id:this.form.id
          }
          , {
            headers: {
              "Content-Type": "application/json"
            }
          }
      ).then((response) => {
        var result = response.data;
        console.log(result);
        if (result.code===1) {
          this.$message.success("商品拆料驳回成功!")
          this.getData()
          this.shenPiVisible = false
        } else {
          this.$alert("撤销驳回出错，请重新操作")
        }
      }).catch((err) => {
        console.log(err)
        this.$message.error({message: "请求出错，请检查", center: true, duration: 2000});
      })
    },
    // 撤销驳回
    chexiaoBoHui(row){
      console.log(JSON.stringify(row.id))
      var state = this.form.status = 2;
      console.log(state);
      this.$confirm('确定要撤销驳回吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.$api.chailiao.editList, {
              status: state, id:row.id
            }
            , {
              headers: {
                "Content-Type": "application/json"
              }
            }
        ).then((response) => {
          this.shenPiVisible = false
          var result = response.data;
          console.log(result);
          if (result.code===1) {
            this.$message.success("商品拆料驳回成功!")
            this.getData()
          } else {
            this.$alert("撤销驳回出错，请重新操作")
          }
        }).catch((err) => {
          console.log(err)
          this.$message.error({message: "请求出错，请检查", center: true, duration: 2000});
        })
      })
    },
    //打开审批弹框
    openShenpi(scope,row) {
      this.form = row;
      console.log(this.form);
      this.shenpifrom = true;
    },
    openAdd() {
      this.form={
        id: "",
        number: "",
        status: "2",
        created: "",
        mainstore: "",
        commodity_type: "",
        amount: "",
        weight: "",
        creator: "",
        approver: "",
        approve_time: ""
      }
      this.dialogFormVisible2 = true
    },
    getData() {
      this.$axios.post(this.$api.chailiao.getchailiaoList, this.query).then(response => {
        console.log(response);
        var result = response.data.data.list;
        console.log(result);
        this.tableData = result;
        this.$set(this.$data, 'tableData', result)
        this.pageTotal = response.data.data.total || 50;
        var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize)
        if (totalPage2 < this.query.pageIndex) {
          this.query.pageIndex = totalPage2;
          this.getData();
        }
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      });
    },
    //打开编辑框
    openEdit(scope, row) {
      this.form = row;
      console.log(this.form);
      this.dialogFormVisibleLook = true;
    },
    //打开商品拆料详细编辑
    openMingXi(scope) {
      this.mingxiValue = {...scope};
      console.log(this.mingxiValue);
      this.dialogFormVisibleMingXiEdit = true;
    },
    //详细编辑
    editList() {
      console.log(this.form);
      this.$axios.post(this.$api.chailiao.editList, this.form).then(res => {
        console.log(res);
        console.log(res.data);
        console.log(res.data.msg)
        if (res.data.msg === '编辑成功!') {
          this.getData()
          this.$message.success("修改成功")
          this.form = ''
          this.dialogFormVisibleLook = false
        } else {
          this.$message.error("修改失败")
        }
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      });
    },
    //拆料明细
    chailiaomingxi(index, row) {
      this.idx = index;
      this.row = row;
      this.form.number = row.number;
      this.mingxiValue.number = this.form.number;
      console.log(this.form.number);
      this.mingxi = true;
      this.$axios.get(this.$api.chailiao.chailiaoMiXiList + "?number=" + this.form.number).then(res => {
        console.log(res);
        var result = res.data.data;
        this.mingxiList = result;
        console.log("aaaa___" + JSON.stringify(result));
        console.log("bbb___" + JSON.stringify(result));
        this.$set(this.$data, this.mingxiList, result)
        console.log(JSON.stringify(result));
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      })
    },
    //删除操作
    deleteList(row) {
      console.log(JSON.stringify(row));
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.chailiao.delList, {
          params: {
            id: row.id
          }
        }).then(res => {
          this.getData()
          var result = res.data;
          console.log(JSON.stringify(result));
          if (result.msg === '删除成功！') {
            this.$message.success("删除成功");
          } else {
            this.$alert(result.msg)
          }
        }).catch(err => {
          console.log(err);
          this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
        })
      }).catch(() => {
      });
    },
    //商品拆料添加
    addList() {
      this.$axios.post(this.$api.chailiao.addList, this.form, {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        if (res.data.code == '1' && res.data.success == true) {
          this.$message.success("添加成功！")
          this.getData();
          this.dialogFormVisible2 = false;
          this.addmingxiform();
        } else {
          this.$message.error({message: "添加失败", center: true, duration: 2000});
        }
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      });
    },
    //查询
    selectList() {
      console.log(this.selectValue);
      this.$axios.post(this.$api.chailiao.selectList, this.selectValue, {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        var result = res.data.data;
        console.log(result.list);
        this.tableData = result.list;
        if (result.success === true) {
          this.getData();
          // this.dialogFormVisibleSelect = false;
        }
        console.log(res);
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      });
    },
    //查询表单重置
    reset() {
      this.selectValue = {
        creator: "",
        commodity_type: "",
        mainstore: "",
        number: "",
        startTime: "",
        endTime: ""
      },
          this.getData();
    },
    //添加明细表单的重置
    addmingxiform() {
      this.form = {
        id: "",
        number: "",
        status: "2",
        created: "",
        mainstore: "",
        commodity_type: "",
        amount: "",
        weight: "",
        creator: "",
        approver: "",
        approve_time: ""
      }
    },
    //拆料明细添加弹框的重置
    mingxireset() {
      this.mingxiValue = {
        number: '',
        commodity_code: '',
        commodity_name: '',
        gold_weight: '',
        gold_price: '',
        mainstone_weight: '',
        mainstone_cost: '',
        laborcost: '',
        cost: '',
        certificate_fee: '',
        secondstone_name: '',
        secondstone_weight: '',
        secondstone_cost: ''
      }
    },
    //拆料明细添加
    addMingXi() {
      // console.log(JSON.stringify(row));
      this.$axios.post(this.$api.chailiao.addMingXi, this.mingxiValue, {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        if (res.data.code == '1' && res.data.success == true) {
          this.$message.success("添加成功！")
          this.dialogFormVisibleMingXi = false;
          this.chailiaomingxi(this.idx, this.row);
          this.mingxireset();
        } else {
          this.$message.error({message: "添加失败", center: true, duration: 2000});
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error({ message: "数据库出错，请联系管理员",center: true,duration: 2000 });
      });
    },
    //拆料明细删除???
    delMingXi(row) {
      // console.log(JSON.stringify(row));
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.chailiao.delMingXi, {
          params: {
            id: row.id
          }
        }).then(res => {
          this.chailiaomingxi(this.idx, this.row);
          var result = res.data;
          console.log(JSON.stringify(result));
          if (result.msg === '删除成功！') {
            this.$message.success("删除成功");
          } else {
            this.$alert(result.msg)
          }
        }).catch(err => {
          console.log(err);
          this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
        })
      }).catch(() => {
      });
    },
    //拆料明细编辑
    editMingXi() {
      console.log(this.mingxiValue.number);
      this.$axios.post(this.$api.chailiao.editMingxi, this.mingxiValue).then(res => {
        console.log(res);
        console.log(res.data);
        if (res.data.msg === '编辑成功!') {
          this.chailiaomingxi(this.idx, this.row);
          this.$message.success("修改成功")
          this.dialogFormVisibleMingXiEdit = false
        } else {
          this.$message.error("修改失败")
        }
      }).catch(err => {
        console.log(err);
        this.$message.error({message: "数据库出错，请联系管理员", center: true, duration: 2000});
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "currentPage", val);
      this.getData();
    }
  }
};
</script>
<style scoped>
.dingdan {
  font-size: 18px;
}
.handle-box {
  margin-bottom: 20px;
}
.dingdanbianhao input {
  width: 200px;
  height: 20px;
  margin-left: 10px;
}
.dingdanbianhao span {
  margin-right: 50px;
}
.dingdanbianhao {
  text-align: left;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.anniu {
  margin-top: 30px;
  text-align: center;
}
.marginLeft{
  margin-left: 17px;
}
.selectBtn{
  text-align: center;
  margin-top: 23px
}
.selectBox{
  margin-top: 10px;
}
.mr10[data-v-31dfb552]{
  margin-left: 15px;
}
</style>
